<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1,shrink-to-fit=no" />
		<title>authors_details</title>
		<link rel="stylesheet" type="text/css" href="boot/dist/css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="font-awesome-4.7.0/font-awesome-4.7.0/css/font-awesome.css" />
		<link rel="stylesheet" type="text/css" href="css/authors_details.css" />
		<link rel="stylesheet" type="text/css" href="css/authors_detailss.css" />

		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.bundle.min.js"></script>
		<script src="js/popper.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="boot/dist/js/bootstrap.js"></script>
		<script src="jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/authors_details.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="header1">
			<div class="container">
				<div class="row">
					<div class="col-lg-2 col-12 text-center py-4 h_py">
						<a href="javascript:;">
							<img src="img/logo-header-06.png">
						</a>
					</div>
					<div class="col-lg-6 col-12 py-4 h_py1">
						<form class="h_col form-control border d-flex justify-content-between align-items-center rounded-pill" style=" height: 50px;">
							<!--2.2设置菜单项  nav-item 下拉菜单的区域 dropdown-->
							<span class="nav-item dropdown h_w">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link h_bor" data-toggle="dropdown">MOVIES<i class="fa fa-angle-down pl-2"></i></a>

								<!--2.设置下拉菜单-->
								<span class="dropdown-menu h_coll">
									<a href="#" class="dropdown-item">HOME</a>
									<a href="#" class="dropdown-item">VIDEOS</a>
									<a href="#" class="dropdown-item">FEATURES</a>
									<a href="#" class="dropdown-item">BLOG</a>
									<a href="#" class="dropdown-item">CONTACT</a>
								</span>

							</span>
							<input type="text" placeholder="Search for a Movie..." class="border-0 w-75 pl-4 h_input" style="outline: none;">
							<button type="" class="border-0 btn"><i class="fa fa-search h_btn"></i></button>
						</form>
					</div>
					<div class="col-lg-4 col-12 py-4 d-flex align-items-center h_ul">
						<ul class="list-unstyled mb-0 d-flex justify-content-around j align-items-center w-100">
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-facebook fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-twitter fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-vimeo fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-youtube-play fa_h"></i></a>
							</li>
							<a href="javascript:;" class="m_a rounded-pill">SUBMIT&nbsp;VIDEO</a>
						</ul>
					</div>
				</div>
			</div>
		</div>

		<div class="h_nav h-auto py-2">
			<!-- navbar-expand-md -->
			<div class="container d-flex justify-content-between align-items-center h_a">
				<div class="navbar p-0 navbar-expand-md h_center">
					<button type="button" class="btn navbar h_btnbg" data-toggle="collapse" data-target="#meu">
						<i class="fa fa-bars"></i>
					</button>
					<i class="border-right mx-3 h_hr" style="height: 30px;"></i>
					<div class="collapse navbar-collapse" id="meu">
						<ul class="nav list-unstyled d-flex text-center mx-auto justify-content-around justify-content-center navbar-nav h_bgg">
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">MOME</a>
								<span class="nav-item dropdown float-left w-100">
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="index.html" class="dropdown-item">index</a>
									</span>
								</span>
							</li>
		
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">MOVIE</a>
								<span class="nav-item dropdown float-left w-100 ">
		
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="shop.html" class="dropdown-item">Shop</a>
										<a href="shop_details.html" class="dropdown-item">shop_details</a>
									</span>
		
								</span>
							</li>
		
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">VIDEOS</a>
								<span class="nav-item dropdown float-left w-100">
		
									<!--2.设置下拉菜单-->
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="video.html" class="dropdown-item">Video</a>
										<a href="video_details.html" class="dropdown-item">video_details</a>
									</span>
								</span>
							</li>
		
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">FEATURES</a>
								<span class="nav-item dropdown float-left w-100">
		
									<!--2.设置下拉菜单-->
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="about.html" class="dropdown-item">About</a>
										<a href="submit.html" class="dropdown-item">Submit</a>
										<a href="authors.html" class="dropdown-item">list_authors</a>
										<a href="authors_details.html" class="dropdown-item">authors_details</a>
									</span>
								</span>
							</li>
		
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">BLOG</a>
								<span class="nav-item dropdown float-left w-100">
		
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="blog.html" class="dropdown-item">Blog</a>
										<a href="blog_details.html" class="dropdown-item">blog_detail</a>
		
									</span>
								</span>
							</li>
		
							<li class="">
								<!--2.3设置导航链接 nav-link ； 下拉菜单的激活按钮 dropdown-toggle  属性data-toggle = "dropdown"-->
								<a href="#" class="nav-link" data-toggle="dropdown">CONTACT</a>
								<span class="nav-item dropdown float-left w-100">
		
									<!--2.设置下拉菜单-->
									<span class="dropdown-menu h_li">
										<a href="contact.html" class="dropdown-item">CONTACT</a>
									</span>
								</span>
							</li>
						</ul>
					</div>
		
				</div>
				<!-- 两个图标 -->
				<div class="h_a">
					<a href="javascript:;">
						<i class="fa fa-cloud-upload"></i>
						<span>SUBMIT VIDED</span>
					</a>
					<i class="border-right mx-3"></i>
					<a href="javascript:;">
						<i class="fa fa-user"></i>
						<span>IOGIN</span>
					</a>
				</div>
			</div>
		</div>
		<!-- 顶部导航栏区域 -->
		<div style="background: url(img/bg-page-title-04.jpg) no-repeat; background-size: cover; height: 500px;" class="h_img">

			<div style="background-color: rgba(0,0,0,0.5); height: 500px;">
				<!-- 文字区域 -->
				<p align="center" class="" style="font-size: 35px; color: white; padding-top: 150px;">Modern warfare (2018)</p>
				<p align="center" class="" style="color: gray;">To start the day in the bost wat，onjoythe extraordlinary<br />buffotbrekfast
					in the our courtyard caressed</p>

			</div>
		</div>
		<!-- 中部区域 -->
		<div class="bg-white py-5" id="mbg">
			<div class="container">
				<ul class="list-unstyled row">

					<li class="col-lg-3 col-12 py-2 " style="top: -200px;">
						
							<div class="position-sticky bg-white sticky-top" style="box-shadow: 0px 0px 10px gray; padding: 15px 15px 15px 15px;">
								<div class="overflow-hidden m_pp">
							
									<img src="img/author-01.jpg" class="w-100 m_imgaa" />
									<p class="px-3 text-center d-flex justify-content-around m_po mb-0 w-100 d-flex align-content-center" style="color: white; background-color: rgba(0,0,0,0.8); padding: 10px 0px 10px 0px;">
										<i class="fa fa-facebook text-white"></i>
										<i class="fa fa-twitter text-white"></i>
										<i class="fa fa-vimeo text-white"></i>
										<i class="fa fa-facebook text-white"></i>
									</p>
								</div>
							
								<!-- 下方介绍区域 -->
								<ul class="list-unstyled py-3 ">
									<li class="py-1 row">
										<span style="font-weight: bold;" class="col-6">Birth Name:</span>
										<span class="" style="color: gray;" class="col-6">Haley Phelps</span>
									</li>
									<li class=" py-1 row">
										<span style="font-weight: bold;" class="col-6">Dateof Birth:</span>
										<span class="" style="color: gray;" class="col-6">03，Oct 1988</span>
									</li>
									<li class=" py-1 row">
										<span style="font-weight: bold;" class="col-6">Residence:</span>
										<span class="" style="color: gray;" class="col-6">USA</span>
									</li>
									<li class="py-1 row">
										<span style="font-weight: bold;" class="col-6">Country:</span>
										<span class="" style="color: gray;" class="col-6">USA</span>
									</li>
							
								</ul>
							
							
							</div>
						
						
					</li>

					<!-- 右边区域 -->
					<li class="col-lg-9 col-12 py-5">
						<h5>BIOGRAPHY</h5>
						<!--  -->
						<p style="color: gray; font-weight: normal;" class="py-4">
							Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
							magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
							consequat.Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
							pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
							laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium,
							totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae
						</p>

						<p style="color: gray; font-weight: normal;" class="">
							Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia magni dolores eos qui
							ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
							consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
							quaerat voluptatem.
						</p>

						<!-- 轮播图区域 -->
						<div class="banner">
							<ul class="list-unstyled">
								<li><img src="img/author-detail-01.jpg" class="img-fluid w-100" /></li>
								<li><img src="img/bg-01.jpg" class="img-fluid w-100" /></li>
								<li><img src="img/bg-02.jpg" class="img-fluid w-100" /></li>
							</ul>
							<ul class="list-unstyled">
								<a href="javascript:void(0)" id="left" class="text-center rounded-circle mx-1 fa fa-angle-left text-decoration-none"></a>
								<a href="javascript:void(0)" id="right" class="text-center rounded-circle mx-1 fa fa-angle-right text-decoration-none" ></a>
							</ul>
						</div>

						<!-- 文字区域 -->
						<p style="color: gray;">Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
							magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
							sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
							magnam aliquam quaerat voluptatem.</p>

						<h5 class="py-4">FILMOGRAPHY</h5>

						<div class="d-flex justify-content-between">
							<span style="color: gray;">Movie Name</span>
							<span style="color: gray;">Release Date</span>
						</div>

						<hr style="color: gray;" />

						<!-- 介绍区域 -->
						<ul class="list-unstyled row">
							<li class="col-lg-2 col-3 py-2">
								<div class="overflow-hidden">
									<img src="img/film-01.jpg" class="w-100 m_img_xiao">
								</div>
							</li>
							<li class="col-lg-10 col-9 py-2 m_bian">
								<span style="color: gray;">Action，Drama</span>
								<div class="py-1 d-flex justify-content-between flex-lg-row flex-column">
									<h5>Man On The Mountain</h5>
									<span style="color: gray;">May 20，2018</span>
								</div>
								<div class="">
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star-o text-warning"></i>
									<i class="fa fa-star-o text-warning"></i>
									<i class="fa fa-star-o text-warning"></i>
									<span style="color: gray;">7/10</span>
								</div>
							</li>
						</ul>
						
						<!--  -->
						<hr style="color: gray;" />
						
						<!-- 介绍区域 -->
						<ul class="list-unstyled row">
							<li class="col-lg-2 col-3 py-2">
								<div class="overflow-hidden">
									<img src="img/film-02.jpg" class="w-100 m_img_xiao">
								</div>
							</li>
							<li class="col-lg-10 col-9 py-2 m_bian">
								<span style="color: gray;">Action，Drama</span>
								<div class="py-1 d-flex justify-content-between flex-lg-row flex-column">
									<h5>Man On The Mountain</h5>
									<span style="color: gray;">May 20，2018</span>
								</div>
								<div class="">
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star-o text-warning"></i>
									<i class="fa fa-star-o text-warning"></i>
									<i class="fa fa-star-o text-warning"></i>
									<span style="color: gray;">7/10</span>
								</div>
							</li>
						</ul>
						
						<!--  -->
						<hr style="color: gray;" />
						
						<!-- 介绍区域 -->
						<ul class="list-unstyled row">
							<li class="col-lg-2 col-3 py-2">
								<div class="overflow-hidden">
									<img src="img/film-03.jpg" class="w-100 m_img_xiao">
								</div>
							</li>
							<li class="col-lg-10 col-9 py-2 m_bian">
								<span style="color: gray;">Action，Drama</span>
								<div class="py-1 d-flex justify-content-between flex-lg-row flex-column">
									<h5>Man On The Mountain</h5>
									<span style="color: gray;">May 20，2018</span>
								</div>
								<div class="">
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star-o text-warning"></i>
									<i class="fa fa-star-o text-warning"></i>
									<i class="fa fa-star-o text-warning"></i>
									<span style="color: gray;">7/10</span>
								</div>
							</li>
						</ul>
						
						<!--  -->
						<hr style="color: gray;" />
						
						<!-- 介绍区域 -->
						<ul class="list-unstyled row">
							<li class="col-lg-2 col-3 py-2">
								<div class="overflow-hidden">
									<img src="img/film-04.jpg" class="w-100 m_img_xiao">
								</div>
							</li>
							<li class="col-lg-10 col-9 py-2 m_bian">
								<span style="color: gray;">Action，Drama</span>
								<div class="py-1 d-flex justify-content-between flex-lg-row flex-column">
									<h5>Man On The Mountain</h5>
									<span style="color: gray;">May 20，2018</span>
								</div>
								<div class="">
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star text-warning "></i>
									<i class="fa fa-star-o text-warning"></i>
									<i class="fa fa-star-o text-warning"></i>
									<i class="fa fa-star-o text-warning"></i>
									<span style="color: gray;">7/10</span>
								</div>
							</li>
						</ul>
					</li>
				</ul>
				</li>


				</ul>
			</div>
		</div>

		<!-- 底部区域 -->
		<div class="py-5 " style="background-color : #000000;">
			<div class="container">
				<div class="row">
					<div class="col-lg-5 col-12 py-5 text-center f_padd">
						<p align="center">
							<a href="javascript:;"><img src="./img/logo-header-05.png" class=""></a>
						</p>
						<p align="center" class="py-3" style="color: gray;">Lommode ligula eget dolor. Aenean meassa.Cum sociis que
							penatibus et
							magnis dis parturient montes lorenm，nascetur ridiculusmus. Donec quam felis， uitricies nex massa.Cum sociis...</p>
						<!-- 按钮组 -->

						<div class="btn-group pt-3" style="width: 85%;">
							<input type="text" placeholder="Email" style="width: 70%; background-color: #222222; border: 1px solid gray; color: gray; outline: none;">
							<button class="btn text-white font-weight-bold" style="background-color: red;">SUBSCRIBE</button>
						</div>
						<!-- 图标区域 -->
						<ul class="list-unstyled mb-0 d-flex justify-content-around j align-items-center mx-auto py-5" style="width: 70%;">
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-facebook fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-twitter fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-vimeo fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-youtube-play fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-google-plus fa_h"></i></a>
							</li>
							<li>
								<a href="javascript:;" class="a_rounded"><i class="fa fa-file-movie-o fa_h"></i></a>
							</li>
						</ul>
					</div>
					<div class="col-lg-4 col-12 py-5 f_padd_2">
						<div class="row">
							<div class="col-12">
								<h5 class="text-white">LATEST POSTS</h5>
							</div>
						</div>
						<div class="row">
							<div class="col-4 py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-01.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">5 Skin Care Rituals You Should Be Doing Before Bed</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
						<div class="row">
							<div class="col-4  py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-02.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">Fashion Outfit Ideas to Try From lnstagram This Week</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
						<div class="row">
							<div class="col-4 py-3">
								<div class="overflow-hidden">
									<img src="img/png-post-03.png" class="w-100 m_img_xiao">
								</div>
							</div>
							<div class="col-8 py-3">
								<p class="text-white mb-0" style="line-height: 22px;">7 Soaps to Supercharge Your Daily Skincare Routine</p>
								<p style="color: gray;">August 11，2018</p>
							</div>
						</div>
					</div>
					<div class="col-lg-3 col-12 py-5 f_padd_3">
						<h5 class="text-white">POPULAR CATEGORY</h5>
						<ul class="list-unstyled py-3">
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Fragrances</span>
								<span class="text-white">15</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Hair Care</span>
								<span class="text-white">12</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Make Up</span>
								<span class="text-white">6</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Outfits</span>
								<span class="text-white">9</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Skin Care</span>
								<span class="text-white">10</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Style</span>
								<span class="text-white">8</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Fashion</span>
								<span class="text-white">5</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Lifestyle</span>
								<span class="text-white">2</span>
							</li>
							<li class="d-flex justify-content-between py-1">
								<span style="color: gray;">Weliness</span>
								<span class="text-white">3</span>
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<div class="py-4 border-top text-center" style="border-color: gray !important; background-color: #000000;">
			<p style="color: gray;" class="mb-0">Copyright 2018 Carporate WordPress Theme Theme by <span><a href="javascript:;"
					 style="color: red; text-decoration: none;">ThimPress</a></span></p>
		</div>
		<!--  -->
		<div class="back">返回顶部</div>
	</body>
</html>
<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
<script>
	$(function() {
		$(document).scrollTop();
		//1.被卷去的头部
		var boxTop = $('#mbg').offset().top;
		$(window).scroll(function() {
			// console.log(11);
			console.log($(document).scrollTop());

			if ($(document).scrollTop() >= boxTop) {
				$('.back').fadeIn();
			} else {
				$('.back').fadeOut();
			}
		})

		//返回顶部
		$('.back').click(function() {
			// $(document).scrollTop(0);
			$('body,html').stop().animate({
				scrollTop: 0
			})
		})
	})
</script>
